* {
    margin: 0;
    padding: 0;
}

.hide {
    visibility: hidden !important;
}

.block {
    display: block !important;
}

.flip-card, .flip-cover {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-card {
    position: absolute;
    top: 0;

    -webkit-transform-origin: center 0;
    -moz-transform-origin: center 0;
    -o-transform-origin: center 0;
    -ms-transform-origin: center 0;
    transform-origin: center 0;
}

.flip-card img, .flip-cover img {
    width: 100%;
}

.flip-card {
    display: none;
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-back {
    -webkit-transform: rotate3d(0, 1, 0, -180deg);
    -moz-transform: rotate3d(0, 1, 0, -180deg);
    -o-transform: rotate3d(0, 1, 0, -180deg);
    -ms-transform: rotate3d(0, 1, 0, -180deg);
    transform: rotate3d(0, 1, 0, -180deg);
    transform: rotateY(-180deg);
}

.flip-animation {
    -webkit-animation: flip 1s ease-in-out forwards;
    -moz-animation: flip 1s ease-in-out forwards;
    -o-animation: flip 1s ease-in-out forwards;
    -ms-animation: flip 1s ease-in-out forwards;
    animation: flip 1s ease-in-out forwards;
}

@-webkit-keyframes flip{
    0% {
        -webkit-transform: rotate3d(0 , 1, 0, 0);
        transform: rotate3d(0, 1, 0, 0);
    }
    50% {
        -webkit-transform: rotate3d(0 , 1, 0, -190deg);
        transform: rotate3d(0, 1, 0, -190deg);
    }
    70% {
        -webkit-transform: rotate3d(0 , 1, 0, -172deg);
        transform: rotate3d(0, 1, 0, -172deg);
    }
    80% {
        -webkit-transform: rotate3d(0 , 1, 0, -180deg);
        transform: rotate3d(0, 1, 0, -180deg);
    }
    95% {
        -webkit-transform: rotate3d(0 , 1, 0, -178deg);
        transform: rotate3d(0, 1, 0, -178deg);
    }
    100% {
        -webkit-transform: rotate3d(0 , 1, 0, -180deg);
        transform: rotate3d(0, 1, 0, -180deg);
    }
}

@keyframes flip{
    0% {
        -webkit-transform: rotate3d(0 , 1, 0, 0);
        transform: rotateY(0);
    }
    50% {
        -webkit-transform: rotate3d(0 , 1, 0, -190deg);
        transform: rotateY(-190deg);
    }
    70% {
        -webkit-transform: rotate3d(0 , 1, 0, -172deg);
        transform: rotateY(-172deg);
    }
    80% {
        -webkit-transform: rotate3d(0 , 1, 0, -180deg);
        transform: rotateY(-180deg);
    }
    95% {
        -webkit-transform: rotate3d(0 , 1, 0, -178deg);
        transform: rotateY(-178deg);
    }
    100% {
        -webkit-transform: rotate3d(0 , 1, 0, -180deg);
        transform: rotateY(-180deg);
    }
}